@use "@/common/styles/colors"

.monitoring-chart
  background-color: colors.$lighter-background
  border: 2px solid colors.$dark-gray
  border-radius: 0.75rem
  padding: 1.5rem
  margin-bottom: 1.5rem

  .chart-title
    margin: 0 0 1rem 0
    color: colors.$white
    font-size: 1.1rem
    font-weight: 600

  .chart-container
    position: relative
    width: 100%
    height: calc(100% - 2rem)

  &.no-data
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    text-align: center
    min-height: 250px

    h4
      color: colors.$white
      margin-bottom: 0.5rem

    p
      color: colors.$subtext
      font-style: italic
      margin: 0

.charts-grid
  display: grid
  grid-template-columns: 1fr 1fr
  gap: 1.5rem
  margin-bottom: 2rem

  @media (max-width: 1200px)
    grid-template-columns: 1fr

  .chart-full-width
    grid-column: 1 / -1
